<template>
  <div class="modificationPassword">
    <div class="card text-left">
      <div class="card-body">
        <h4 class="card-title">修改个人密码</h4>
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm myfrom"
          style="padding-left:50px;padding-right:50px;"
        >
          <el-form-item class="my-el-form-item" label="用户名" prop="username">
            <el-input
              type="text"
              clearable
              :disabled="true"
              v-model="ruleForm.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item class="my-el-form-item" label="旧密码" prop="password">
            <el-input type="text" clearable v-model="ruleForm.currentPass" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="my-el-form-item" label="新密码" prop="password">
            <el-input
              type="password"
              clearable
              show-password
              v-model="ruleForm.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              show-password
              clearable
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            <router-link
              to="/userInfo"
              class="btn btn-outline-primary mx-2"
              style="margin-right:5px;"
              tag="button"
            >返回</router-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value !== this.ruleForm.password) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      avatar: this.$store.getters.getUserInfo.avatar,
      ruleForm: {
        id: this.$store.getters.getUserInfo.id,
        username: this.$store.getters.getUserInfo.username,
        currentPass: '',
        password: '',
        checkPass: '',
      },
      rules: {
        username: [
          { message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        password: [
          { message: '请输入密码', trigger: 'blur' },
          {
            min: 3,
            max: 10,
            message: '长度在 3 到 10 个字符',
            trigger: 'blur',
          },
        ],
        checkPass: [{ validator: validatePass2, trigger: 'blur' }],
      },
    }
  },

  methods: {
    refresh() {
      this.reload()
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const data = await this.$http.post('/sys/user/updatePass', {
            id: this.ruleForm.id,
            currentPass: this.ruleForm.currentPass,
            password: this.ruleForm.password,
          })

          if (data.code != 200) {
            this.$refs[formName].resetFields()
            this.$message.error(data.message)
          } else {
            this.$refs[formName].resetFields()
            this.$message.success(data.data)
            this.$router.push('/userInfo')
            location.reload()
          }
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>

<style lang="less" scoped>
.modificationPassword {
  height: 100vh;
  background: url(https://cdn.syjun.vip/background.png) no-repeat 100% 100%;
  .card {
    background: transparent;
    border: none !important;
  }
}
</style>
